<script setup lang='ts'>
import { ref, watch } from 'vue';

const res1 = ref(11)
watch(res1, (newValue, oldValue) => {
    console.log(newValue);

})
type Person = {
    name: string,
    info: {
        address: string,
        phone: string
    }
}
const res2 = ref<Person>({
    name: '张三',
    info: {
        address: '北京',
        phone: '111'
    }
})
watch(res2, (newValue, oldValue) => {
    console.log('新值' + newValue + '旧值' + oldValue);

}, { deep: true })

</script>

<template>
    <div>
        <h1>watch监听</h1>
        <button @click="res1--">-</button>
        <p>{{ res1 }}</p>
        <button @click="res1++">+</button>
        <p>{{ res2.name }}</p>
        <p>{{ res2.info.address }}</p>
        <button @click="res2.name = '李四'">修改名字</button>
        <button @click="res2.info.address = '天津'">修改地址</button>
    </div>
</template>

<style scoped></style>